<template>
<h1>El-消息提示组件</h1>
  <el-button :plain="true" @click="open2">成功消息</el-button>
  <el-button :plain="true" @click="open3">警告消息</el-button>
  <el-button :plain="true" @click="open1">普通消息</el-button>
  <el-button :plain="true" @click="open4">错误消息</el-button>
  <el-button :plain="true" @click="open5">可关闭的消息</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const open1 = () => {
  ElMessage('This is a message.')
}
const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
const open4 = () => {
  ElMessage.error('Oops, this is a error message.')
}
const open5 = () => {
  ElMessage({
    showClose: true,
    message: 'Oops, this is a error message.',
    type: 'error',
  })
}
</script>

<style scoped>

</style>